<template>
  <div>
    <el-card>
      <div class="custom-tree-container">
        <el-row
          :gutter="20"
          style="
            width: expression(
              document.body.clientWidth <= 1200? '1200px': 'auto'
            );
            min-width: 1200px;
          "
        >
          <!-- 菜单 -->
          <el-col :span="10">
            <el-tree
              v-loading="loading"
              :data="menuData"
              node-key="id"
              :expand-on-click-node="false"
              :props="defaultProps"
              @node-click="handleNodeClick"
              default-expand-all
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span>
                  <HButton @click="addSelect(data)" type="add" size="mini"
                    >添加</HButton
                  >
                  <HButton @click="edit(data)" type="update" size="mini"
                    >编辑</HButton
                  >
                  <HButton @click="del(data)" type="delete" size="mini"
                    >删除</HButton
                  >
                </span>
              </span>
            </el-tree>
          </el-col>
          <!-- 表格 -->
          <el-col :span="14">
            <el-card>
              <div>
                <HButton @click="addLimit()" type="add" size="mini"
                  >添加操作权限</HButton
                >
                <el-table class="mt-20" :data="tableData" border stripe>
                  <el-table-column prop="name" label="权限名称" align="center">
                  </el-table-column>
                  <el-table-column prop="uri" label="路径" align="center">
                  </el-table-column>
                  <el-table-column prop="order" label="排序" align="center">
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <HButton
                        @click="delLimit(scope.row)"
                        type="delete"
                        size="mini"
                        >删除</HButton
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <addDia ref="addDia" @transData="getMenuData"></addDia>
    <addSDia ref="addDias" @transData="transData"></addSDia>
    <addLimitDia ref="addLimitDia" @transData="getTableData"></addLimitDia>
  </div>
</template>

<script>
import addDia from "./components/menu-add";
import addSDia from "./components/menu-addSelect";
import addLimitDia from "./components/menu-addLimit";
import {
  getAllMenu,
  delMenu,
  getPermission,
  delPermission,
} from "@/api/family_doctor/family_doctor";
export default {
  components: { addDia, addSDia, addLimitDia },
  data() {
    return {
      loading: false,
      ifAdd: true,
      limitId: "",
      menuData: [],
      tableData: [],
      defaultProps: {
        children: "childrenNode",
        label: "name",
      },
      scope: [],
      data: false,
    };
  },
  created() {
    this.getMenuData();
  },
  methods: {
    //获取菜单
    getMenuData() {
      getAllMenu(this.data).then((res) => {
        this.menuData = res.data;
      });
    },
    //菜单点击事件
    handleNodeClick(data, node, obj) {
      this.limitId = data.id;
      if (data.level == 3) {
        this.getTableData();
      }
    },
    //新增选择
    addSelect(scope) {
      this.scope = scope;
      this.$refs.addDias.openDialog(scope);
    },
    //新增菜单
    add(scope, data) {
      this.ifAdd = true;
      this.$refs.addDia.openDialog(scope, this.ifAdd, data);
    },
    //编辑菜单
    edit(scope) {
      this.ifAdd = false;
      this.$refs.addDia.openDialog(scope, this.ifAdd);
    },
    //删除菜单
    async del(scope) {
      const confirmResult = await this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      delMenu(scope.id).then((res) => {
        if (res.code == "AA000000") {
          this.$message.success("删除成功！");
          this.getMenuData();
        }
      });
    },
    //添加权限
    addLimit() {
      this.$refs.addLimitDia.openDialog(this.limitId);
    },
    //获取权限
    getTableData() {
      getPermission(this.limitId).then((res) => {
        this.tableData = res.data;
      });
    },
    //删除权限
    async delLimit(scope) {
      const confirmResult = await this.$confirm("是否删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      delPermission(scope.id).then((res) => {
        if (res.code == "AA000000") {
          this.$message.success("删除成功！");
          this.getTableData();
        }
      });
    },
    //供级别选择组件调用函数
    transData(data) {
      this.add(this.scope, data);
    },
  },
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-tree-node__content {
  min-height: 40px;
  background-color: #f5f7fa;
}

.el-tree-node__content:hover {
  background-color: #89c2f7;
}

.el-tree-node.is-current > .el-tree-node__content {
  background-color: #89c2f7 !important;
  color: white;
}
</style>